<template>
  <a-button type="primary" @click="state.open = true"><plus-outlined/>添加菜单</a-button>
  <a-drawer title="添加菜单" v-model:open="state.open">
    <a-form name="permission-form"
            :model="formState"
            ref="formRef"
            :label-col="{span:6}"
            :wrapper-col="{span:17}">
      <a-form-item label="权限模块">
        <a-radio-group button-style="solid" v-model:value="formState.model" @change="modelChange">
          <a-radio-button value="workbench">工作台</a-radio-button>
          <a-radio-button value="admin">管理后台</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="权限类型">
        <a-radio-group button-style="solid" v-model:value="formState.type">
          <a-radio-button value="folder">目录</a-radio-button>
          <a-radio-button value="router">菜单</a-radio-button>
          <a-radio-button value="button">按钮</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="菜单名称" name="title" :rules="{required:true,message:'请输入菜单名称',trigger:'blur'}">
        <a-input v-model:value="formState.title"/>
      </a-form-item>
      <a-form-item label="上级菜单">
        <a-select v-model:value="formState.pid">
          <a-select-option :value="0">一级菜单</a-select-option>
          <a-select-option v-for="item in store.permissions" :key="item.id" :value="item.id">
            {{item.title}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="路由地址"
                   name="path"
                   v-if="state.checkPath"
                   :rules="{required:state.checkPath,message:'请输入路由地址',trigger:'blur'}">
        <a-input v-model:value="formState.path"/>
      </a-form-item>
      <a-form-item label="权限标识"
                   name="key"
                   help="权限标识规范 workbench:project"
                   :rules="{required:true,message:'请输入权限标识',trigger:'blur'}">
        <a-input v-model:value="formState.key"/>
      </a-form-item>
      <a-form-item label="状态">
        <a-radio-group button-style="solid" v-model:value="formState.status">
          <a-radio-button :value="1">已启用</a-radio-button>
          <a-radio-button :value="0">已禁用</a-radio-button>
        </a-radio-group>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-flex justify="end" gap="8">
        <a-button @click="state.open = false">取消</a-button>
        <a-button type="primary" @click="onSubmit" :loading="state.loading">保存</a-button>
      </a-flex>
    </template>
  </a-drawer>
</template>
<script setup lang="ts">
import {PlusOutlined} from "@ant-design/icons-vue";
import {reactive, ref, watch} from "vue";
import {usePermissionStore} from '@/store/permission'
import {createPermission} from "@/api/modules/permission";
import useMessage from "@/plugin/useMessage";

const store = usePermissionStore()

const state = reactive({
  open:false,
  loading:false,
  checkPath:true
})
const formRef = ref()
const formState = reactive({
  title:'',
  pid:0,
  path:'',
  model:'workbench',
  key:'workbench:',
  type: 'router'
})
let rules = ref({
  title: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
  path: [{ required: state.checkPath, message: '请输入路由地址', trigger: 'blur' }],
  key: [{ required: state.checkKey, message: '请输入权限标识', trigger: 'blur' }]
 })

 watch(()=>formState.type,()=>{
   state.checkPath = formState.type === 'folder'|| formState.type === 'router'
 })
const onSubmit = async () => {
  try {
    await formRef.value?.validateFields()
    state.loading = true
    let res = await createPermission(formState)
    if(res.code === 200){
      formRef.value?.resetFields()
      state.open = false
      await store.getPermissions()
    }
    useMessage(res.code,res.message)
  } catch (e) {
    console.log(e)
  }finally {
    state.loading = false
  }
}
const modelChange = (e:any)=>{
  formState.key = e.target.value+':'
}
</script>

<style scoped>

</style>